﻿/**
 * ━━━━━━神兽出没━━━━━━
 * 　　　┏┓　　　┏┓
 * 　　┏┛┻━━━┛┻┓
 * 　　┃　　　　　　　┃
 * 　　┃　　　━　　　┃
 * 　　┃　┳┛　┗┳　┃
 * 　　┃　　　　　　　┃
 * 　　┃　　　┻　　　┃
 * 　　┃　　　　　　　┃
 * 　　┗━┓　　　┏━┛Code is far away from bug with the animal protecting
 * 　　　　┃　　　┃    神兽保佑,代码无bug
 * 　　　　┃　　　┃
 * 　　　　┃　　　┗━━━┓
 * 　　　　┃　　　　　　　┣┓
 * 　　　　┃　　　　　　　┏┛
 * 　　　　┗┓┓┏━┳┓┏┛
 * 　　　　　┃┫┫　┃┫┫
 * 　　　　　┗┻┛　┗┻┛
 *
 * ━━━━━━感觉萌萌哒━━━━━━
 */

/**
 * 分页控件 Version 1.0
 * last update time 2016/3/29
 * 描述：基于jQuery的ajax分页插件
 * 功能：1.单独为前台设计
 *       2.点击分页按钮返回到锚点处
 * 实例：查看下方注释内容
 */

;
(function (window, $) {

    var myAjaxPager = window.myAjaxPager = {
        opts: {
            // 每页条数
            pageSize: 5,
            // 上一页按钮显示文本
            preText: "上一页",
            // 下一页按钮显示文本
            nextText: "下一页",
            // 首页按钮显示文本
            firstText: "首页",
            // 尾页按钮显示文本
            lastText: "尾页",
            // 显示首页
            showFirst: false,
            // 显示尾页
            showLast: false,
            // 分页按钮左偏移量
            shiftingLeft: 3,
            // 分页按钮右偏移量
            shiftingRight: 3,
            // 上一页按钮右边至少保留页码数量
            preLeast: 2,
            // 下一页按钮左边至少保留页码数量
            nextLeast: 2,
            // 锚点标记
            toPoint: "",
            // ajax请求地址
            url: "",
            // 查询条件
            searchParam: {},
            // ajax请求前callback
            beforeSend: null,
            // ajax请求成功callback
            success: null,
            // ajax请求完成callback
            complete: null,
            // ajax请求失败callback
            error: function () {
                alert("请求出错，请重试请求！");
            },
            // 当前页吗数
            pageIndex: 1,
            // 记录总条数
            totalCount: 0,
            // 总页数
            totalPage: 0
        },
        pagerElement: null,
        commonHtmlText: {
            spanHtml: "<span class='{0}'>{1}</span>",
            pageIndexHtml: "<a href='javascript:void(0)' onclick='myAjaxPager.doPage({0},{1},{2})'>{3}</a>",
            rightHtml: "<span class='text'> &nbsp; 到</span> <input type='text' id='txtToPager' value={1} /><span class='text'>页/{0}页</span> <button id='btnJump' onclick='myAjaxPager.jumpToPage();return false;' >确定</button>",
            clearFloatHtml: "<div style='clear:both;'></div>",
            stringEmpty: ""
        },
        init: function (obj, op) {
            // 对象初始化
            var _self = this;

            _self.opts = $.extend({}, _self.opts, op);
            _self.pagerElement = obj;

            _self.doPage(_self.opts.pageIndex, _self.opts.pageSize, _self.opts.searchParam);

            return _self.opts;
        },
        doPage: function (index, pageSize, searchParam) {
            // 执行分页方法
            var _self = this;

            _self.opts.pageIndex = index;
            _self.opts.pageSize = pageSize;
            _self.opts.searchParam = searchParam;

            $.ajax({
                type: "post",
                data: $.extend(_self.opts.searchParam || {}, {
                    pageIndex: _self.opts.pageIndex,
                    pageSize: _self.opts.pageSize || 10
                }),
                dataType: "json",
                url: _self.opts.url,
                beforeSend: function () {
                    _self.opts.beforeSend();
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    _self.opts.error(XMLHttpRequest, textStatus, errorThrown);
                },
                success: function (data) {
                    _self.opts.success(data);

                    //后台返回数据格式：{"total":0,"items":[]}
                    _self.opts.totalCount = data.total;
                    _self.getTotalPage();
                    if (_self.opts.totalCount > 0 && _self.opts.pageIndex > 0) {
                        var pageTextArr = new Array;

                        _self.createPreAndFirstBtn(pageTextArr);
                        _self.createIndexBtn(pageTextArr);
                        _self.createNextAndLastBtn(pageTextArr);
                        _self.renderHtml(pageTextArr);
                        // 跳转到锚点
                        $("html,body").animate({ scrollTop: $(_self.opts.toPoint).offset().top }, 100);
                    }
                },
                complete: function () {
                    _self.opts.complete();
                }
            });
        },
        getTotalPage: function () {
            // 获取总页数
            var _self = this;

            _self.opts.totalPage = Math.ceil(_self.opts.totalCount / _self.opts.pageSize);
        },
        createPreAndFirstBtn: function (pageTextArr) {
            // 创建上一页按钮链接
            var _self = this;

            if (_self.opts.pageIndex == 1) {
                if (_self.opts.showFirst)
                    pageTextArr.push(_self.createSpan(_self.opts.firstText, 'disenable'));

                pageTextArr.push(_self.createSpan(_self.opts.preText, 'disenable'));
            } else {
                if (_self.opts.showFirst) {
                    pageTextArr.push(_self.createIndexText(1, _self.opts.firstText));
                }

                pageTextArr.push(_self.createIndexText(_self.opts.pageIndex - 1, _self.opts.preText));
            }
        },
        createNextAndLastBtn: function (pageTextArr) {
            // 创建下一页按钮链接
            var _self = this;
            if (_self.opts.pageIndex == _self.opts.totalPage) {
                pageTextArr.push(_self.createSpan(_self.opts.nextText, 'disenable'));

                if (_self.opts.showLast)
                    pageTextArr.push(_self.createSpan(_self.opts.lastText, 'disenable'));
            } else {
                pageTextArr.push(_self.createIndexText(_self.opts.pageIndex + 1, _self.opts.nextText));
                if (_self.opts.showLast)
                    pageTextArr.push(_self.createIndexText(_self.opts.totalPage, _self.opts.lastText));
            }
        },
        createIndexBtn: function (pageTextArr) {
            // 创建中间分页索引按钮链接
            /*
                前：当前页 > 偏移量 + 至少保留 + 1
                后：当前页 < 总页码 - 偏移量 - 至少保留
            */

            var _self = this;

            var shiftingLeftStart = _self.opts.shiftingLeft + _self.opts.preLeast + 1;
            var shiftingRightStart = _self.opts.totalPage - _self.opts.shiftingRight - _self.opts.nextLeast - 1;

            /*页码*/
            if (_self.opts.pageIndex > shiftingLeftStart) {
                for (i = 1; i <= _self.opts.preLeast; i++) {
                    pageTextArr.push(_self.createIndexText(i, i));
                }

                pageTextArr.push(_self.createSpan('...'));

                for (i = _self.opts.pageIndex - _self.opts.shiftingLeft; i < _self.opts.pageIndex; i++) {
                    pageTextArr.push(_self.createIndexText(i, i));
                }

            } else {
                for (i = 1; i < _self.opts.pageIndex; i++) {
                    pageTextArr.push(_self.createIndexText(i, i));
                }
            }

            pageTextArr.push(_self.createSpan(_self.opts.pageIndex, 'current'));

            if (_self.opts.pageIndex <= shiftingRightStart) {

                for (i = _self.opts.pageIndex + 1; i < _self.opts.pageIndex + 1 + _self.opts.shiftingRight; i++) {
                    pageTextArr.push(_self.createIndexText(i, i));
                }

                pageTextArr.push(_self.createSpan('...'));

                for (i = _self.opts.totalPage - 1; i <= _self.opts.totalPage; i++) {
                    pageTextArr.push(_self.createIndexText(i, i));
                }

            } else {
                for (i = _self.opts.pageIndex + 1; i <= _self.opts.totalPage; i++) {
                    pageTextArr.push(_self.createIndexText(i, i));
                }
            }
        },
        renderHtml: function (pageTextArr) {
            // 渲染分页控件到页面
            var _self = this;

            var pageText = _self.commonHtmlText.stringEmpty;

            for (var i = 0; i < pageTextArr.length; i++) {
                pageText += pageTextArr[i];
            }

            _self.pagerElement.html(pageText).append(stringFormat(_self.commonHtmlText.rightHtml, _self.opts.totalPage, _self.opts.pageIndex)).append(_self.commonHtmlText.clearFloatHtml);
        },
        createSpan: function (text, className) {
            // 创建span
            var _self = this;

            return stringFormat(_self.commonHtmlText.spanHtml, className ? className : _self.commonHtmlText.stringEmpty, text);
        },
        createIndexText: function (index, text) {
            // 创建索引文本
            var _self = this;
            return stringFormat(_self.commonHtmlText.pageIndexHtml, index, _self.opts.pageSize, JSON.stringify(_self.opts.searchParam), text);
        },
        jumpToPage: function () {
            // 跳转到
            var _self = this;

            var $txtToPager = $("#txtToPager", _self.pagerElement);
            var index = parseInt($txtToPager.val());

            if (!isNaN(index) && index > 0 && index <= _self.opts.totalPage) {
                _self.doPage(index, _self.opts.pageSize, _self.opts.searchParam);
            } else {
                $txtToPager.focus();
            }
        }
    }

    $.fn.myAjaxPager = function (option) {
        return myAjaxPager.init($(this), option);
    };

})(window, jQuery);

/**
 辅助方法:格式化字符串
 */
window.stringFormat = function () {
    if (arguments.length == 0)
        return null;

    var str = arguments[0];

    for (var i = 1; i < arguments.length; i++) {
        var reg = new RegExp('\\{' + (i - 1) + '\\}', 'gm');

        str = str.replace(reg, arguments[i]);
    }

    return str;
};

/**
 * 使用实例
 */
//$(function () {
//    $('#pager').myAjaxPager({
//        url: "Handler1.ashx",
//        toPoint: "#dataTable",
//        pageSize: 10,
//        searchParam: {
//            /*
//            * 如果有其他的查询条件，直接在这里传入即可
//            */
//            id: 1,
//            name: 'test'
//        },
//        beforeSend: function () {
//        },
//        success: function (data) {
//            /*
//            *返回的数据根据自己需要处理
//            */

//            var tableStr = "<tr><td>Id</td><td>姓名</td><td>年龄</td></tr>";
//            $.each(data.items, function (i, v) {
//                tableStr += "<tr><td>" + v.Id + "</td><td>" + v.Name + "</td><td>" + v.Age + "</td></tr>";
//            });

//            $('#dataTable').html(tableStr);
//        },
//        complete: function () {
//        }
//    });
//})

